<template>
  <div class="tablePageWarp">
    <div>
      <div class="Brief">
        <a-row class="BriefRow">
          <span>
            {{ '全部车辆(台)' }}：{{ info.totalVehicle || '0' }}
          </span>
          <span>
            {{ $t('升级进度') }}：{{ info.successVehicle&&info.totalVehicle?info.successVehicle/info.totalVehicle : '0' }}
          </span>
          <span>
            {{ '已暂停车辆(台)' }}：{{ info.pauseVehicle || '0' }}
          </span>
          <span>
            {{ '未完成车辆(台)' }}：{{ info.notCompleteVehicle || '0' }}
          </span>
        </a-row>
        <a-row class="BriefRow">
          <span>
            {{ '成功车辆(台)' }}：{{ info.successVehicle || '0' }}
          </span>
          <span>
            {{ '失败车辆(台)' }}：{{ info.failVehicle || '0' }}
          </span>
          <span>
            {{ '升级中车辆(台)' }}：{{ info.runningVehicles || '0' }}
          </span>
          <span>
            {{ '未开始车辆(台)' }}：{{ info.notStartVehicle || '0' }}
          </span>
        </a-row>
      </div>
      <a-form layout="vertical" >
        <a-row :gutter="[16,0]">
          <!-- vin -->
          <a-col :md="8" :sm="24">
            <a-form-model-item :label="$t('VIN')">
              <a-input v-model="queryParam.vin" :placeholder="$t('pleaseInput') + 'VIN'" @keyup.enter="refreshData(true)"/>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="24" style="margin-top: 22px;">
            <div class="searchBtns">
              <a-button-group>
                <auth-button type="primary" @click="refreshData(true)">
                  <i class="iconfont icon-chazhao"></i>
                  {{ $t('inquiry') }}
                </auth-button>
                <a-button @click="handleClear">
                  <i class="iconfont icon-qingkong"></i>
                  {{ $t('clear') }}
                </a-button>
              </a-button-group>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div class="commonTableSty">
      <s-table
        class="h100"
        ref="table"
        :columns="columns"
        :data="loadData"
        :scrollX="900"
        :rowKey="(record, index) => index"
        size="default" >
        <template slot-scope="text" v-for="column in commonColumns" :slot="column.scopedSlots.customRender">
          <table-ellipsis :text="text || '-'" :key="column.key"></table-ellipsis>
        </template>
      </s-table>
    </div>
  </div>
</template>
<script>
import { STable } from '@/components'
import moment from 'moment'
import AuthButton from '@/components/AuthButton'
import { CarUpgradeInformationListColumns } from '@/views/vehicle/config/list'
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
const initQueryParam = {
  vin: undefined
}
export default {
  components: {
    STable,
    AuthButton,
    TableEllipsis
  },
  props: {
    // 任务id
    id: {
      type: String,
      default: ''
    },
    activeKey: {
      type: String,
      default: ''
    },
    vehicleId: {
      type: String,
      default: ''
    },
    taskInfo: {
      type: Object,
      default () {
        return {
        }
      }
    }
  },
  created () {
  },
  watch: {
    taskInfo: {
      handler (val) {
        if (val) {
          this.info = val
        }
      },
      immediate: true
    },
    activeKey: {
      handler (val) {
        if (val === 'carUpgradeInformation') {
          this.refreshData()
        }
      }
    }
  },
  computed: {
    commonColumns () {
      return this.columns.filter(item => !item.special)
    }
  },
  data () {
    return {
      moment,
      columns: [...CarUpgradeInformationListColumns],
      // 列表数据
      tableData: [],
      queryParam: { ...initQueryParam },
      info: {}
    }
  },
  mounted () {
  },
  methods: {
    handleClear () {
      this.queryParam = { ...initQueryParam }
      this.refreshData(true)
    },
    loadData (parameter) {
      const vm = this
      // 如果是全部则不传值给后端
      const JnqueryParam = JSON.parse(JSON.stringify(vm.queryParam))
      // eslint-disable-next-line no-restricted-syntax
      for (const key in JnqueryParam) {
        if (JnqueryParam[key] === '') {
          JnqueryParam[key] = undefined
        }
      }
      this.tableData = []
      const apiPromise = vm.$api.getTaskVehiclePageData({ ...parameter, ...JnqueryParam, vehicleId: this.vehicleId, taskId: this.id })
      return new Promise((resolve, reject) => {
        return apiPromise.then(res => {
          if (res.data) {
            this.tableData = res.data
          }
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    // 刷新
    refreshData (isToFirstPage = false) {
      const vm = this
      vm.$nextTick(() => {
        this.$refs.table.refresh(isToFirstPage)
      })
    }
  }
}
</script>
<style scoped lang="less">
.Brief {
  margin-bottom: 10px;
  .BriefRow{
    margin-bottom: 10px;
      span{
      font-size: 16px !important;
      float: left;
      width: 180px;
    }
  }
}
 ::v-deep .ant-form-item-label {
  padding-bottom: 2px;
}
::v-deep .ant-form-item {
  margin-bottom: 0;
}
</style>
